<template>
  <div class="ai-introduction-page">
    <div class="title-image">
      <img :src="haixiaomiaoAiImg" alt="海小喵AI" />
    </div>
    <div class="welcome-text">
      <h1 class="main-title">Hi,我是嗨喵AI智能助手~</h1>
      <p class="subtitle">很高兴为您服务!如果您在大屏互动方面有任何疑问或需求,欢迎随时与我对话。</p>
    </div>
    <div class="feature-container">
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="zxsxImg" alt="最新上线" />
        </div>
        <div class="feature-text">最新上线</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="dpsyImg" alt="大屏使用" />
        </div>
        <div class="feature-text">大屏使用</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="hdgnImg" alt="互动功能" />
        </div>
        <div class="feature-text">互动功能</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="hdyxImg" alt="互动游戏" />
        </div>
        <div class="feature-text">互动游戏</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="tgsyImg" alt="提高收益" />
        </div>
        <div class="feature-text">提高收益</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="gdImg" alt="更多" />
        </div>
        <div class="feature-text">更多</div>
      </div>
    </div>
    <div class="button-section">
      <button class="action-button" @click="handleGoNow">
        立即前往
      </button>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useDialogConversationStore } from '@/stores/dialogConversationStore'
import haixiaomiaoAiImg from '@/assets/icons/haixiaomiao-ai.png'
import zxsxImg from '@/assets/icons/zxsx.png'
import dpsyImg from '@/assets/icons/dpsy.png'
import hdgnImg from '@/assets/icons/hdgn.png'
import hdyxImg from '@/assets/icons/hdyx.png'
import tgsyImg from '@/assets/icons/tgsy.png'
import gdImg from '@/assets/icons/gd.png'

const router = useRouter()
const dialogConversationStore = useDialogConversationStore()

const handleGoNow = () => {
  dialogConversationStore.currentConversationId = ''
  dialogConversationStore.currentConversationIndex = -1
  router.push({ name: 'PcChat' })
}
</script>

<style lang="scss" scoped>
.ai-introduction-page {
  width: 100%;
  min-height: 100vh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.title-image {
  width: auto;
  height: 241px;
  padding-top: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.welcome-text {
  margin-top: 20px;
  text-align: center;
  
  .main-title {
    font-weight: 700;
    font-size: 34px;
    color: #000000;
    letter-spacing: 2px;
    margin: 0;
  }
  
  .subtitle {
    margin-top: 5px;
    font-weight: 500;
    font-size: 21px;
    color: #6F6F6F;
    margin: 0;
  }
}

.feature-container {
  margin-top: 32px;
  width: 1015px;
  border-radius: 18px;
  border: 1px solid #508FF5;
  padding: 32px 0px;
  display: flex;
  flex-direction: row;
  gap: 32px;
  justify-content: center;
  align-items: center;
  
  .feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    .feature-icon {
      width: 60px;
      height: 60px;
      background: #4A90E2;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    
    .feature-text {
    margin-top: 15px;
    font-size: 22px;
    color: #508FF5;
    text-align: center;
    padding: 8px 20px;
    }
  }
}

.button-section {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  
  .action-button {
    background: linear-gradient(270deg, #486FFF 0%, #56A5EE 100%);
    border-radius: 16px;
    border: none;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    padding: 12px 144px;
    font-size: 34px;
  }
}
</style>


